<template>
  <div class="dashboardWrapper">
    <div class="cardRow">
      <!-- 仅使用一个v-for循环，确保总数量为9个 -->
      <EngagementTypeDetail
        v-for="platform in platforms"
        :key="platform.name"
        class="dashboardCard"
        :platform-icon="platform.icon"
        :platform-name="platform.name"
        :stat-item1="platform.stats[0]"
        :stat-item2="platform.stats[1]"
        :chart-legend="platform.chartLegend"
        :chart-data="platform.chartData"
      ></EngagementTypeDetail>
    </div>
  </div>
</template>

<script>
import EngagementTypeDetail from "./components/EngagementTypeDetail.vue";

export default {
  components: {
    EngagementTypeDetail,
  },
  data() {
    return {
      platforms: [
        // 平台1：Instagram（已完善数据）
        {
          name: "Instagram",
          icon: require("@/assets/SocialMetrics/instagram.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Shares", icon: "share.png" },
            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
            { name: "Saves", icon: "saves.png" },
          ],
          chartData: [
            { value: 25, name: "Shares", color: "#EFB82C" },
            { value: 35, name: "Comments", color: "#4199E1" },
            { value: 60, name: "Likes", color: "#3BD3DA" },
            { value: 80, name: "Saves", color: "#A563EA" },
          ],
        },

        // 平台2：X（新增数据）
        {
          name: "X",
          icon: require("@/assets/SocialMetrics/X.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Shares", icon: "share.png" },
            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
          ],
          chartData: [
            { value: 80, name: "Likes", color: "#EFB82C" },
            { value: 30, name: "Comments", color: "#3BD3DA" },
            { value: 15, name: "Shares", color: "#A563EA" },
          ],
        },

        // 平台3：Linkedin（新增数据）
        {
          name: "Linkedin",
          icon: require("@/assets/SocialMetrics/Linkedin.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Shares", icon: "share.png" },
            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
          ],
          chartData: [
            { value: 80, name: "Likes", color: "#EFB82C" },
            { value: 30, name: "Comments", color: "#3BD3DA" },
            { value: 15, name: "Shares", color: "#A563EA" },
          ],
        },

        // 平台4：Reddit（新增数据）
        {
          name: "Reddit",
          icon: require("@/assets/SocialMetrics/Reddit.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Likes", icon: "likes.png" },
            { name: "Comments", icon: "comments.png" },
          ],
          chartData: [
            { value: 80, name: "Likes", color: "#A563EA" },
            { value: 30, name: "Comments", color: "#3BD3DA" },
          ],
        },
        // 平台5：YouTube（已完善数据）
        {
          name: "YouTube",
          icon: require("@/assets/SocialMetrics/YouTube.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
            { name: "Views", icon: "views.png" },
          ],
          chartData: [
            { value: 30, name: "Comments", color: "#058287" },
            { value: 80, name: "Likes", color: "#3BD3DA" },
            { value: 80, name: "Views", color: "#A563EA" },
          ],
        },
        // 平台6：TikTok（新增数据）
        {
          name: "TikTok",
          icon: require("@/assets/SocialMetrics/TikTok.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Shares", icon: "share.png" },
            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
            { name: "Saves", icon: "saves.png" },
          ],
          chartData: [
            { value: 25, name: "Shares", color: "#EFB82C" },
            { value: 52, name: "Comments", color: "#4199E1" },
            { value: 36, name: "Likes", color: "#3BD3DA" },
            { value: 12, name: "Saves", color: "#A563EA" },
          ],
        },
        // 平台7：Threads（新增数据）
        {
          name: "Threads",
          icon: require("@/assets/SocialMetrics/Threads.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Shares", icon: "share.png" },

            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
          ],
          chartData: [
            { value: 25, name: "Shares", color: "#EFB82C" },
            { value: 25, name: "Comments", color: "#3BD3DA" },
            { value: 25, name: "Likes", color: "#A563EA" },
          ],
        },
        // 平台8：Google（新增数据）
        {
          name: "Google",
          icon: require("@/assets/SocialMetrics/Google.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Shares", icon: "share.png" },

            { name: "Comments", icon: "comments.png" },
            { name: "Likes", icon: "likes.png" },
          ],
          chartData: [
            { value: 25, name: "Shares", color: "#EFB82C" },
            { value: 25, name: "Comments", color: "#3BD3DA" },
            { value: 25, name: "Likes", color: "#A563EA" },
          ],
        },
        // 平台9：RedNote（新增数据）
        {
          name: "RedNote",
          icon: require("@/assets/SocialMetrics/RedNote.png"),
          stats: [
            { label: "Followers", value: "123" },
            { label: "Posts", value: "173" },
          ],
          chartLegend: [
            { name: "Likes", icon: "likes.png" },
            { name: "Comments", icon: "comments.png" },
            { name: "Saves", icon: "saves.png" },
          ],
          chartData: [
            { value: 103, name: "Saves", color: "#4199E1" },
            { value: 50, name: "Comments", color: "#3BD3DA" },
            { value: 78, name: "Likes", color: "#A563EA" },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
/* 样式保持不变 */
.dashboardWrapper {
  border-radius: 8px;
}

.cardRow {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.dashboardCard {
  flex: 1 0 calc(33.333% - 20px);
  margin: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
</style>
